<template>
  <div class="box">
    <div
        class="back">
      <div v-for="item in 20">
        <div v-for="item1 in 4" class="back-logo-box">
          <img class="back-logo" src="/logo.png"/>
        </div>
      </div>

    </div>

    <div
        v-if="isMenuOpen"
        class="header">
      <div>
        <img src="/logo.png"
             class="header-logo"
             alt="logo"/>
      </div>
      <div class="header-title">
        KANTBOOT
      </div>
    </div>
    <div
        v-if="isMenuOpen"
        style="padding: 0 10px;box-sizing: border-box">
      <div class="split-line"></div>
    </div>
    <el-scrollbar
        style="height:calc(100vh - 130px)"
        :style="{
          'height': isMenuOpen?'calc(100vh - 130px)':'calc(100vh - 30px)',
        }"
    >
      <!-- 设置选中颜色和未选中颜色   -->
      <el-menu
          default-active="''"
          class="menu"
          :collapse="!isMenuOpen"
          background-color="rgba(0,0,0,0)"
          active-text-color="rgba(0,0,0,1)"
          text-color="rgba(0,0,0,.6)">
        <template v-for="(item,index) in menuStore.menuList">

          <el-menu-item
              @click="toPage(item)"
              :index="item.id"
              v-if="!item.children||item.children.length===0">
            <img
                v-if="item.fileIdOfIcon"
                :src="$kt.file.visit(item.fileIdOfIcon)"
                class="menu-icon"/>
            <img
                v-else
                src="/logo.png"
                class="menu-icon"/>
            <span>{{ $i18n.zhToGlobal(item.title) }}</span>
          </el-menu-item>

          <el-sub-menu v-else :index="item.id">
            <template #title>
              <img
                  v-if="item.fileIdOfIcon"
                  :src="$kt.file.visit(item.fileIdOfIcon)"
                  class="menu-icon"/>
              <img
                  v-else
                  src="/logo.png"
                  class="menu-icon"/>
              <span>{{ $i18n.zhToGlobal(item.title) }}</span>
            </template>
            <el-menu-item
                v-for="child in item.children"
                @click="toPage(child)"
                :index="child.id">
              <img
                  v-if="child.fileIdOfIcon"
                  :src="$kt.file.visit(child.fileIdOfIcon)"
                  class="menu-icon"/>
              <img
                  v-else
                  src="/logo.png"
                  class="menu-icon"/>
              <span>{{ $i18n.zhToGlobal(child.title) }}</span></el-menu-item>
          </el-sub-menu>


        </template>

      </el-menu>
    </el-scrollbar>


  </div>
</template>

<script>
import {menuStore} from "/src/store/moudules/menuStore";

export default {
  data() {
    return {
      menuStore: menuStore(),
      menuList: [],
      isMenuOpen:true
    };
  },
  mounted() {
    this.$kt.event.on("menu:close", () => {
      this.isMenuOpen = false;
    });
    this.$kt.event.on("menu:open", () => {
      this.isMenuOpen = true;
    });
    this.$kt.event.on("routerChange", () => {
      this.getMenuList();
    });
  },
  methods: {
    toPage(item) {
      this.menuStore.openMenu(item);
    },
    getMenuList() {
      this.$kt.requestSecurity.send({
        uri: '/user-admin-web/admin/router/getSelf',
        method: 'POST',
        stateSuccess: (res) => {
          this.menuStore.setMenuList(res.data);
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0);
}

.header {
  position: relative;
  height: 110px;
  text-align: center;
  z-index: 1;
  padding: 20px;
  box-sizing: border-box;

  .header-logo {
    height: 60px;
  }

  .header-title {
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: bold;
    //color: rgba(255, 255, 255, .8);
    color: rgba(0, 0, 0, .8);
  }
}

.menu {
  border: none;
}


.back {
  position: absolute;
  width: 100%;
  height: 100%;
  // 超出部分隐藏
  overflow: hidden;
  // 不换行
  white-space: nowrap;
}

.back-logo-box {
  position: relative;
  width: 80px;
  height: 80px;
  display: inline-block;
  opacity: .05;

  .back-logo {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}

.back-logo-box:hover {
  opacity: 1;
}

.split-line {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 10px;
  //background-color: rgba(255,255,255,.6);
  background-color: rgba(0, 0, 0, .6);
}

.menu-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 5px;
}
</style>
